<template>
  <view>
<!--    {{formData}}-->
    <AppForm v-model:currentData="formData" :formItems="formItems" :rules="rules" title="日期"
             @onSubmit="formSubmit"/>

  </view>
</template>

<script lang="ts" setup>
import {ref} from 'vue';

import {useCommonStore} from '@/stores/commonStore';
import type {dateInfoInterface} from '@/assets/ts/Interface'

const commonStore = useCommonStore();
const rules = {
  name: {
    rules: [{
      required: true,
      errorMessage: '事件名称不能为空'
    }]
  },
}
const EmailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
const formItems = ref([
  {
    field: "name",
    type: "text",
    label: "事件名称",
    required: true,
    rules: [{
      validator: (val: any) => val !== '' && val != null || "必填"
    }]
  },
  {
    field: "isLunar",
    type: "switch",
    label: "是否使用农历日期",
    options: [{text: '是', value: true}, {text: '否', value: false}]
  },
  {
    field: "lunarDate",
    type: "datePicker",
    label: "农历日期",
    endDate:new Date().toISOString().split("T")[0],
    valueType: 'date',
    dateType: "yyyy/MM/dd",
    showOn: (formData: dateInfoInterface) => formData.isLunar,
    required: true,
    show: false,
  },
  {
    field: "solarDate",
    type: "datePicker",
    label: "公历日期",
    valueType: 'date',
    dateType: "yyyy/MM/dd",
    showOn: (formData: dateInfoInterface) => !formData.isLunar,
    required: true,
    show: false,
  },
  // {
  //   field: "isTop",
  //   type: "switch",
  //   label: "是否置顶",
  //   options: [{text: '是', value: 1}, {text: '否', value: 0}]
  //
  // }
]);

const formData = ref<dateInfoInterface>({
  id: '',
  name: '',
  isLunar: true,
  lunarDate: '',
  solarDate: '',
  openId: '',
  isTop: 0,
  weight: 1,
});


function formSubmit(formData: dateInfoInterface) {
  if (formData.isLunar) {
    delete formData.solarDate;
  } else {
    delete formData.lunarDate;
  }
  commonStore.setDateInfo(formData);
}


</script>

<style>
.uni-form-item .title {
  padding: 20rpx 0;
}

.uni-form-item .title.required:after {
  content: '*';
  color: red;
  margin-left: 5px;
}

.uni-btn-v {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
</style>
